<!-- 客服 -->
<template>
  <div
    class="page-box h100 vertical-center dfdsfdsrter"
    :class="xz ? 'act' : ''"
    :data-seer="seer"
    :data-TbleName="TbleName"
  >
    <div class="display-flex h100">
      <div class="msg-left">
        <template v-for="(sd, idx) in kjadsfsd">
          <div
            :class="kjsdfs == idx ? 'act' : ''"
            class="display-flex pd pt10 pm10 gfdgtlist sz"
            @click="sdfdsgfgf(sd, idx)"
          >
            <img :src="sd.touxiang" class="user-icon-left cove" />
            <div class="flex-1 pl10">
              <p class="fz16 display-flex">
                <span
                  class="flex-1 wweertw nowrap"
                  :data-currentTime="currentTime"
                  >{{ sd.name || "--" }}</span
                >
              </p>
              <p class="fz12 z9 dianer">咨询的职位:{{ sd.zwname }}</p>
            </div>
          </div>
        </template>
      </div>
      <div class="msg-box display-flex czbj">
        <div class="msg-title display-flex">
          <div class="flex-1">{{ xctrty.name }} --咨询 {{ xctrty.zwname }}</div>
          <div>
            <n-button type="info" quaternary @click="dasfsdfsdf(xctrty)">
              查看个人信息
            </n-button>
          </div>
        </div>
        <div class="dsfdsrtte flex-1" id="new_message">

          <div v-for="(sd,idx) in msgList">


            <div class="cen">
                <span
                  v-if="
                    idx > 0 &&
                    gerq(sd.addTime, msgList[idx - 1].addTime)
                  "
                >
                  {{ gerq(sd.addTime, msgList[idx - 1].addTime) }}
                </span>
                <span v-if="idx == 0"> {{ gerq(sd.addTime, 0) }} </span>
              </div>


            <div
              class="dsfrrtw"
              v-if="sd.xxlx == 1"
              :class="sd.type == 2 ? 'tr' : ''"
            >
              <span class="msg-text">
                {{ sd.msg }}
              </span>
            </div>
            <div
              class="dsfrrtw"
              v-if="sd.xxlx == 2"
              :class="sd.type == 2 ? 'tr' : ''"
            >
              <span class="msg-text ab">
                <n-image width="200" :src="sd.msg" class="cz" />
              </span>
            </div>
          </div>
        </div>
        <div class="sen-box">

          <div class="pl10">
       
            <i
              class="iconfont z9 fz20 dx-tupian1  sz"
              @click="photoShowModal = true"
            ></i>
           
         
          </div>
          <textarea
            id="textarea"
            class="sen-textarea"
            v-model="tbbse"
            placeholder="请输入内容..."
          />
          <p class="tr pr10">
            <n-button type="info" @click="xxlx=1;fasong()" :loading="jdsfdsf">
              发送
            </n-button>
          </p>
        </div>
      </div>
    </div>
  </div>
  <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
    <template #header>
      <div>个人信息</div>
    </template>
    <div>
      <div class="sdfsdfyrtrt">
        <div>姓名：{{ usdrrt.name || "---" }}</div>
        <div>电话：{{ usdrrt.phone || "---" }}</div>
        <div>微信：{{ usdrrt.weixin || "---" }}</div>
        <div>所在单位：{{ usdrrt.szdw || "---" }}</div>
        <div>
          <span class="cz">头像：</span>
          <img
            :src="usdrrt.touxiang"
            class="asdfdsfrrty cz"
            v-if="usdrrt.touxiang"
          />
        </div>
      </div>
      <div class="sdfsdfyrtrt ab mt20">
        <div>专业技能：{{ usdrrt.zhuanyejn || "---" }}</div>
        <div>工作类型：{{ usdrrt.gzlx || "---" }}</div>
        <div>工作地点：{{ usdrrt.gzdd || "---" }}</div>
        <div>工作经历：{{ usdrrt.gzjl || "---" }}</div>
        <div>
          简历：
          <span
            @click="kdfdsfs(usdrrt.jianli)"
            class="ls sz"
            v-if="usdrrt.jianliname"
            >{{ usdrrt.jianliname }}.pdf</span
          >
          <span v-else>未上传</span>
        </div>
      </div>
    </div>
    <template #action>
      <div class="tr">
        <n-button> 取消 </n-button>
      </div>
    </template>
  </n-modal>



  <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>图片库</div>
      </template>
      <div>
        <photoGallery   types="cbrcchat" @getImg="getImg"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="pupImgfs"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onUpdated } from "vue";
import { NPopover, NImage } from "naive-ui";
import photoGallery from "../../components/util/photoGallery";
import peerJs from "../../components/peerJs/index";
import {
  dxget,
  qurl,
  handleDate,
  transferTimeYMDHm,
  transferHm,
  transferTimeYMD,
  utf16toEntities,
  entitiestoUtf16,
  ISimg,
  dxpost,
} from "../../util/index";
import { onBeforeRouteUpdate } from "vue-router";
import store from "../../store";
import userListvae from "./userList.vue";
const showModal = ref(false);
const usdrrt = ref();
const photoShowModal= ref()
const userid = ref();
const kjadsfsd = ref([]);
const kjsdfs = ref(0);
const xctrty = ref({});
const msgList = ref([]);
const tbbse = ref();
const jdsfdsf = ref(false);
const xxlx= ref(1)
const neifsdgd =ref()
const userList = async () => {
  const { data } = await dxget("cbrc/api/gejsdxList");
  kjadsfsd.value = data;
};
const ghhsxe = async (isdr) => {
  if (!xctrty.value.zwid) {
    return;
  }
  const { data } = await dxget("cbrc/api/getXiaoxi", {
    zwid: xctrty.value.zwid,
    userid: xctrty.value.id,
  });
  msgList.value = data;

  if(isdr){
    setTimeout(() => {
      var container = document.querySelector("#new_message");
    container.scrollTop = container.scrollHeight + 50;
    }, 500);
  }
 
};
const initsd = async () => {
  await userList();
  xctrty.value = kjadsfsd.value[0];
  ghhsxe(true);
};
initsd(true);

const fasong = async () => {
  if (!tbbse.value) {
    window.$message.error("请输入内容");
    return;
  }
  jdsfdsf.value = true;
  const data = await dxpost("cbrc/api/kefuaddcbim", {
    zwid: xctrty.value.zwid,
    userid: xctrty.value.id,
    xxlx:xxlx.value,
    msg: tbbse.value,
  });
  tbbse.value = "";
  jdsfdsf.value = false;
  ghhsxe(true);
};

const sdfdsgfgf = (sd, idx) => {
  xctrty.value = sd;
  kjsdfs.value = idx;
  ghhsxe(true);
};

onUpdated(() => {
  // var container = document.querySelector("#new_message");
  // container.scrollTop = container.scrollHeight + 50;
});
// 接手到消息触发
const seer = computed(() => {
  userList();
  ghhsxe();
  return store.state.currentTime;
});

const dasfsdfsdf = async (xeerr) => {
  userid.value = xeerr.id;
  const { data } = await dxget("cbrc/userList/userList", {
    id: xeerr.id,
  });
  usdrrt.value = data;
  showModal.value = true;
};
const kdfdsfs = (url) => {
  open(url);
};
const getImg = (img) => {

  neifsdgd.value  = img
};
const pupImgfs = () => {
  tbbse.value  = neifsdgd.value
  xxlx.value = 2
  photoShowModal.value = false;
  fasong();
};


// 聊天记录的时间
const gerq = (a, b?) => {
  a=new Date(a).getTime()
  b=new Date(b).getTime()
  let jkjne = a - b;
  let str = "";
  let nData = new Date().getTime();
  let nowDate = nData - a;
  if (!b) {
    return (str = transferTimeYMDHm(a));
  }
  // 今天
  if (transferTimeYMD(a) == transferTimeYMD(nData)) {
    str = transferHm(a);
  } else if (nowDate) {
    str = transferTimeYMDHm(a);
  }

  // 合并近五分钟的消息
  if (jkjne < 1000 * 60 * 5) {
    str = "";
  }

  return str;
};
</script>

<style scoped>
.bgred {
  background: red;
}
.dsfdsrtte {
  /* height: 600px; */
  border-bottom: 1px solid #e0e0e0;
  overflow: auto;
  padding: 0 10px 50px;
}
.user-icon,
.user-icon-left {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}
.user-icon-left {
  width: 44px;
  height: 44px;
}
.msg-text {
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  margin-left: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  max-width: 700px;
}
.msg-text.ab{
  padding: 0;
}
.dsfrrtw.tr .msg-text {
  background: #9eea6a;
}
.dsfrrtw {
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
  width: 100%;
}
.sen-box {
  height: 260px;
}
.dsfrrtw.tr {
  flex-direction: row-reverse;
}
.dsfrrtw.tr span {
  margin-left: 0;
  margin-right: 10px;
}
.msg-left {
  width: 250px;
  height: 100%;
  background: #e4e5e7;
  overflow: auto;
}
.msg-box {
  border: 1px solid #e0e0e0;
  width: 800px;
}
.msg-title {
  line-height: 70px;
  padding: 0 20px;
  font-size: 20px;
  border-bottom: 1px solid #e0e0e0;
}
.sen-textarea {
  width: 100%;
  height: 150px;
  border: 0;
  padding: 10px;
  font-size: 16px;
  resize: none;
}
.gfdgtlist:hover,
.gfdgtlist.act {
  background: #dfdcdb;
}
.wweertw {
  max-width: 120px;
  overflow: hidden;
  margin-right: 15px;
}
.img-text {
  max-width: 200px;
}
.kmmseert {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  padding: 5px 10px;
}
.kmmseert span {
  margin-left: 10px;
  position: relative;
  bottom: 5px;
}
.kknkxeertw {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.sdfsdfyrtrt {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}
.sdfsdfyrtrt.ab {
  grid-template-columns: repeat(2, 1fr);
}
.asdfdsfrrty {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}
</style>
